<template>
  <!-- 调拨 -->
  <div class="main-content-container">
    <div ref="search" class="app-search">
      <el-row>
        <el-col :span="12">
          <Search :data="selections" :data-value="timeVlaue" :attribute="'plannedDate'" @change="handleTypeChange" @dateChange="handleDateChange" />
        </el-col>
        <el-col :span="12" class="buttons" align="right">
          <el-button @click="addReturnVisit"><i class="el-icon-plus" />增加调拨</el-button>
        </el-col>
        <el-col class="margin-top">
          <TypeSelection class="TypeSelection" :data="datas" :default-value="0" :on-change="datasChange" />
        </el-col>
      </el-row>
    </div>
    <div class="margin-top box-show" :style="'height:'+ (innerHeight + 80) + 'px'">
      <el-table :data="list" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column label="调拨单号" prop="allotCode" :show-overflow-tooltip="true" />
        <el-table-column label="调出仓库" prop="calloutWriteoffName" :show-overflow-tooltip="true" />
        <el-table-column label="调入仓库" prop="mediatorWriteoffName" :show-overflow-tooltip="true" />
        <el-table-column label="申请人" prop="proposerName" :show-overflow-tooltip="true" />
        <el-table-column label="申请时间" prop="proposerTime" :show-overflow-tooltip="true" />
        <el-table-column label="状态" prop="status" :show-overflow-tooltip="true" />
        <el-table-column label="入库时间" prop="mediatorTime" :show-overflow-tooltip="true" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" @click="warehousing(row, true)">详情</el-button>
            <el-button v-if="row.status === '待出库'" type="text" @click="cancel(row)">取消</el-button>
            <el-button v-if="row.status === '待入库'" type="text" @click="warehousing(row)">入库</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :page-num="queryParams.page"
        :page-size="queryParams.pageSize"
        :on-change="handlePaginationChange"
        :total="total"
      />
    </div>
    <Dialogs v-if="visible" ref="dialogs" :visible.sync="visible" @handleClose="handleClose" @successHandle="successHandle" />
    <Warehousing v-if="warehousingVisible" :is-details="isDetails" :current-row="currentRow" :visible.sync="warehousingVisible" @handleClose="handleClose" @successHandle="warehousingHandle" />
  </div>
</template>
<script>
window.onbeforeunload = event => {
  window.scrollTo(0, 0); // 每次刷新，滚动条在页面最上面
};
import { TypeSelection } from "@monkey.do/monkey";
import Search from "@/components/Search";
import { all } from "@/config";
import Dialogs from "./dialog";
import Warehousing from "./warehousing";
import { tableColor, labelHeigh } from '@/utils/common.js';
export default {
  components: {
    Search,
    TypeSelection,
    Dialogs,
    Warehousing,
  },
  data() {
    return {
      tableColor,
      innerHeight: null,
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      orderTypeList: [{ id: 0, value: "不限回访类型", label: "" }, { id: 1, value: "未上门回访", label: "未上门回访" }, { id: 2, value: "未成交回访", label: "未成交回访" }, { id: 3, value: "术前回访", label: "术前回访" }, { id: 4, value: "术后回访", label: "术后回访" }, { id: 5, value: "一般回访", label: "一般回访" }],
      total: 0,
      visible: false,
      warehousingVisible: false,
      visibleDetails: false,
      reveal: false,
      selections: all,
      timeVlaue: "",
      query: {
        status: "全部",
      },
      datas: [
        { id: 0, name: '全部' },
        { id: 1, name: '待出库' },
        // { id: 2, name: '待退款' },
        { id: 2, name: '待入库' },
        { id: 3, name: '已入库' },
        { id: 4, name: '已取消' },
        // { id: 4, name: '已退款' },
      ],
      list: [],
      currentRow: {},
      currentRowDetails: {},
      startReturnVisitContent: {},
      statrVisible: false,
      isDetails: false,
    };
  },
  computed: {
  },
  mounted() {
    this.timeVlaue = "all";
    this.getList();
    this.$nextTick(() => {
      this.innerHeight = labelHeigh(this.$refs.search);
    });
  },
  methods: {
    async getList() {
      const query = JSON.parse(JSON.stringify(this.query));
      if (query.status === "全部") query.status = undefined;
      const res = await this.$api['warehouse/allocation/allotrecord']({ ...this.queryParams, query: query });
      if (res.code !== 200) return this.$message.error(res.msg);
      this.list = res.data.result;
      this.total = res.data.total;
    },
    handlePaginationChange(pagination) {
      this.queryParams = { page: pagination.pageNum, pageSize: pagination.pageSize };
      this.getList();
    },
    handleDateChange(item) {
      this.queryParams.page = 1;
      Object.assign(this.query, item);
      this.getList();
    },
    handleTypeChange(item) {
      this.queryParams.page = 1;
      Object.assign(this.query, item);
      this.getList();
    },
    datasChange(item) {
      this.queryParams.page = 1;
      this.$set(this.query, 'status', item.name);
      this.getList();
    },
    addReturnVisit() {
      this.visible = true;
    },
    handleClose() {
      this.visible = false;
      this.warehousingVisible = false;
    },
    successHandle() {
      this.visible = false;
      this.queryParams.page = 1;
      this.getList();
    },
    async cancel(row) {
      const confirmResult = await this.$confirm("请确认是否取消?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      } else {
        const res = await this.$api['warehouse/allocation/deleteAllotrecord']({ id: row.id });
        if (res.code !== 200) return this.$message.error(res.msg);
        this.$message.success("取消成功");
        this.queryParams.page = 1;
        this.getList();
      }
    },
    async warehousing(row, isDetails) {
      const res = await this.$api['warehouse/allocation/getAllotrecord']({ id: row.id });
      if (res.code !== 200) return this.$message.error(res.msg);
      res.data.allotDetailDto.forEach(item => {
        item.mediatorNumber = item.allotNumber;
      });
      this.currentRow = res.data;
      this.warehousingVisible = true;
      this.isDetails = isDetails || false;
    },
    warehousingHandle() {
      this.warehousingVisible = false;
      this.queryParams.page = 1;
      this.getList();
    },
  },
};
</script>
<style scoped lang="scss">
.margin-top{
    margin-top: 10px;
}
</style>
